<template>
  <div class="main" v-color="'bgkImg'">
    <div class="top-box">
      <div class="box-tip">Sign up</div>
    </div>
    <div class="box-1">
      <dz-input
          v-model="form.account"
          :rule="rule.account"
          @phone="phone"
          :rule-label="$t('PleaseenterPhoneNumber')"
          type="phone"
          :placeholder="$t('PleaseenterPhoneNumber')"
          :label="$t('PhoneNumber')"/>
      <dz-input
          v-model="form.password"
          :rule="rule.password"
          :rule-label="$t('PleaseenterPassword')"
          type="password"
          :placeholder="$t('PleaseenterPassword')"
          :label="$t('Password')"/>
      <dz-input
          v-model="form.passwordConfirm"
          :rule="rule.passwordConfirm"
          :rule-label="$t('PleaseenterConfirmpassword')"
          type="password"
          :placeholder="$t('PleaseenterConfirmpassword')"
          :label="$t('Confirmpassword')"/>
      <dz-input
          v-model="form.validateCode"
          :rule="rule.validateCode"
          :rule-label="$t('PleaseenterCAPTCHA')"
          type="code"
          :code="images"
          @click="getQrCode"
          :placeholder="$t('PleaseenterCAPTCHA')"
          :label="$t('CAPTCHA')"/>
      <dz-input
          v-model="form.invitationCode"
          :rule="rule.invitationCode"
          :rule-label="$t('PleaseenterInvitationCode')"
          type="text"
          :left-icon="true"
          :placeholder="$t('PleaseenterInvitationCode')"
          :label="$t('InvitationCode')">
      </dz-input>
    </div>
    <div class="agree">
      <div class="left">
        <van-checkbox shape="square" v-model="checked"></van-checkbox>
      </div>

      <div class="right">
        <qq>Interactive</qq> <b v-routers="{path:'/agree'}"><qq>SparkAgreement</qq></b>.
      </div>
    </div>
    <div class="bottom-box">
      <dz-button @click="submit"><qq>SignUp</qq></dz-button>
      <div class="tip">
        <qq>Alreadyhaveanaccount</qq> <b v-routers="{path:'/login'}"><qq>LogInNow</qq></b>
      </div>
    </div>
    <dz-safe></dz-safe>
  </div>
</template>

<script>
import {getCode} from "@/api/apiFox";
import {debounce} from "@/utils/evenNumbers";
import {checkedReg} from "@/utils/checked";
import {Toast} from "vant";
import {setItem} from "@/utils/auth";

export default {
  data(){
    return{
      input:'',
      checked:true,
      images:'',
      rule:{
        account: false, 	//账号 1
        countryCode: false, 	//国家码 1
        invitationCode: false, 	//邀请码1
        password: false, 	//密码1
        phoneValidateCode: false, //手机验证码
        randstr: false, 	//腾讯验证randstr
        realName: false, //真实姓名
        ticket: false, 	//腾讯验证ticket
        uuid: false, //随机码1
        passwordConfirm:false,
        validateCode: false //图形验证码1
      },
      form:{
        account: "", 	//账号 1
        passwordConfirm:'',
        countryCode: "", 	//国家码 1
        invitationCode: "", 	//邀请码1
        password: "", 	//密码1
        phoneValidateCode: "", //手机验证码
        randstr: "", 	//腾讯验证randstr
        realName: "", //真实姓名
        ticket: "", 	//腾讯验证ticket
        uuid: "", //随机码1
        validateCode: "" //图形验证码1
      }
    }
  },
  methods:{
    phone(item){
      this.form.countryCode = item
    },
    submit(){
      if (this.checked){
        let rules = checkedReg(this.form)
        for (let key in this.rule){
          for(let key1 in rules){
            if (key === key1){
              this.rule[key] = rules[key]
            }else{
              this.rule[key] = false
            }
          }
        }
        let verifiedBy = Object.values(this.rule).includes(true);

        if (verifiedBy){

        }else{
          this.$store.dispatch('regSetUser',this.form).then(res=>{
            Toast.loading({ message:this.$t('Success')})
            setTimeout(()=>{
              this.$router.push('/login').catch(err=>{})
            },1000)
          }).catch(err=>{
            this.getQrCode()
          })
        }
      }else{
        Toast.fail(this.$t('PleaseInteractive'))
      }

    },

    // 获取验证码
    getQrCode:debounce(function (){
      getCode().then(res=>{
        console.log(res)
        this.form.uuid = res.uuid
        this.images = res.img
      }).catch(err=>{})
    },600),

    getList(){
      this.getQrCode()

    }
  },

  mounted() {
    this.getList()
    this.$route.query.code ?  this.form.invitationCode =this.$route.query.code : this.form.invitationCode = ''
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  padding: 20px 0 0 0;
  box-sizing: border-box;
  .top-box{
    width: 100%;
    height: 60px;
    .box-tip{
      width: 117px;
      height: 39px;
      background: #5A4CBB;
      border-radius: 50px 50px 50px 50px;
      font-weight: 800;
      font-size: 26px;
      color: #F1F3F6;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
    }
  }
  .box-1{
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .agree{
    padding:0 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right{
      font-weight: 400;
      font-size: 14px;
      color: #5B6B86;
      margin-left: 10px;
      b{
        font-weight: bold;
        font-size: 14px;
        color: #533DF1;
        text-decoration: underline;
        text-underline-color: #533DF1;
      }
    }
  }
  .bottom-box{
    padding:0 16px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    margin-top: 15px;
    .tip{
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #5B6B86;
      margin-top: 10px;
      b{
        font-weight: bold;
        font-size: 14px;
        color: #533DF1;
        text-decoration: underline;
        text-underline-color: #533DF1;
      }
    }
  }
}
</style>